<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蘑菇街时尚目的地</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/tools.js"></script>
    <script src="js/template-web.js"></script>
    <script src="js/clamp.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 顶部区域 -->
    <div class="nav">
        <!-- 顶部工具条 -->
        <div class="nav-top">
            <div class="nav-in">
                <ul>
                    <li><a href="#"><i></i>首页</a></li>
                    <li><span>|</span></li>
                    <li><a href="#"><i></i>商城</a></li>
                    <li><span>|</span></li>
                    <li><a href="#"></a>我的订单</li>
                    <li><span>|</span></li>
                    <li><a href="#">关于我们<i></i></a></li>
                </ul>
            </div>
        </div>
        <!-- 顶部导航 -->
        <div class="nav-bottom">
            <div class="nav-in">
                <div class="left">
                    <a href="#">
                        <img src="assets/logo.png" alt="">
                    </a>
                    <div>
                        <i></i>
                        目录
                    </div>
                </div>
                <div class="middle">
                    <form action="#">
                        <input type="text" placeholder="半身裙">
                        <input type="submit" value=" ">
                    </form>
                    <ul class="list">
                        <li><a href="#"></a>消息</li>
                        <li><a href="#"></a>收藏</li>
                        <li><a href="#"></a>购物车</li>
                        <li><a href="#"></a>下载APP</li>
                    </ul>
                </div>
                <div class="right">
                    <a href="#">
                        <img src="assets/small_logo.png" alt="">
                        登录
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 吸顶导航 -->
    <div class="nav nav2">
        <!-- 顶部导航 -->
        <div class="nav-bottom">
            <div class="nav-in">
                <div class="left">
                    <a href="#">
                        <img src="assets/logo.png" alt="">
                    </a>
                    <div style="visibility: hidden">
                        <i></i>
                        目录
                    </div>
                </div>
                <div class="middle">
                    <form action="#">
                        <input type="text" placeholder="半身裙">
                        <input type="submit" value=" ">
                    </form>
                    <ul class="list">
                        <li><a href="#"></a>消息</li>
                        <li><a href="#"></a>收藏</li>
                        <li><a href="#"></a>购物车</li>
                        <li><a href="#"></a>下载APP</li>
                    </ul>
                </div>
                <div class="right">
                    <a href="#">
                        <img src="assets/small_logo.png" alt="">
                        登录
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容区域 -->
    <div class="main">
        <div class="main-in">
            <div class="banner">
                <img src="assets/banner.jpg" alt="">
            </div>
            <div class="category">
                <ul class="category-top">
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                    <li><a href="#">上衣</a></li>
                </ul>
                <ul class="category-bottom">
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                    <li>时尚套装</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部区域 -->
    <div class="footer">
        <div class="footer-in">
            <div class="footer-logo">
                <img src="assets/asset%2091.png" alt="">
            </div>
            <div class="footer-helper">
                <dl>
                    <dt>新手帮助</dt>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                    <dd><a href="#">常见反馈</a></dd>
                </dl>
                <dl>
                    <dt>新手帮助</dt>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                    <dd><a href="#">常见反馈</a></dd>
                </dl>
                <dl>
                    <dt>新手帮助</dt>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                    <dd><a href="#">常见反馈</a></dd>
                </dl>
                <dl>
                    <dt>新手帮助</dt>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                    <dd><a href="#">常见反馈</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
                <span>|</span>
                <div>关于我们</div>
            </div>
            <div class="footer-hostname">
                <span>©2020 Mogu.com 杭州卷瓜网络有限公司</span>
            </div>
            <div class="footer-copyright">
                <div class="footer-copyright-top">
                    <a href="#">营业性演出许可证</a>
                    <span>|</span>
                    <a href="#">网络文化经营许可证</a>
                    <span>|</span>
                    <a href="#">网络信息服务信用承诺书</a>
                    <span>|</span>
                    <a href="#">进口冷链食品管理承诺书</a>
                    <span>|</span>
                    <a href="#">营业执照：913301065526808764</a>
                    <span>|</span>
                    <a href="#">增值电信业务经营许可证：浙B2-20110349</a>
                    <span>|</span>
                    <a href="#">安全责任书</a>
                    <span>|</span>
                </div>
                <div class="footer-copyright-bottom">
                    <a href="#">浙公网安备 33010602010221号</a>
                    <span>|</span>
                    <a href="#">互联网药品信息服务资格证书编号：（浙)-经营性-2018-0002</a>
                    <span>|</span>
                    <a href="#">浙网食A33010003</a>
                    <span>|</span>
                    <a href="#">出版物网络交易平台服务经营备案证</a>
                    <span>|</span>
                    <a href="#">(浙)网械平台备字[2018]第00006号</a>
                    <span>|</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 返回顶部区域 -->
    <div class="back">
        <i></i>
        <p>返回顶部</p>
    </div>
</body>
</html>

<!-- 定义模板结构 -->
<script type="text/html" id="mogujieData">
    {{each list}}
    {{if $index === 2 || $index === 3 || $index === 4}}
    <a class="item" style="width: 220px;height: 1160px;"></a>
    {{else}}
    <a class="item">
        <div class="item-box">
            <div class="item-top">
                <img src="{{$value.originItemImage}}" alt="" style="width: 220px;height:{{$value.imgHeight}}px">
                <i class="icon1" style="background-image: url({{$value.lefttop_taglist[0].img}})"></i>
                <i class="icon2"></i>
                <div class="vlogger">
                    <i style="background-image: url({{$value.actorAvatar}})"></i>
                    {{$value.actorName}}
                </div>
            </div>
            <div class="item-bottom">
            <p class="item-title">{{$value.title}}</p>
            <div>
                <div class="left">
                    <span>￥</span>
                    {{$value.showDiscountPrice}}
                    <i style="background-image: url({{$value.bottomIcon}})"></i>
                </div>
                <div class="right">{{$value.sale}}</div>
            </div>
        </div>
        </div>
    </a>
    {{/if}}
    {{/each}}
</script>
